import React from "react";
import {
  Layout,
  Typography,
  Row,
  Col,
  Card,
  Button,
  Space,
  Table,
  List,
} from "antd";
import styles from "./index.module.less";

const { Title, Text } = Typography;

interface RiskItem {
  key: string;
  label: string;
  value: number;
}

interface TodoItem {
  key: string;
  type: string;
  description: string;
  submitter: string;
  receiveTime: string;
}

const riskList: RiskItem[] = [
  { key: "1", label: "即将超期项目", value: 1 },
  { key: "2", label: "已超期项目", value: 1 },
  { key: "3", label: "严重超期项目", value: 0 },
  { key: "4", label: "不符合项", value: 0 },
  { key: "5", label: "缺陷类型分布", value: 6 },
];

const todoList: TodoItem[] = [
  {
    key: "1",
    type: "特性立项",
    description: "[开放上线投产、缺陷相关自助分析数据集和接口] 待立项",
    submitter: "郭嫚/80273791",
    receiveTime: "2025-02-12",
  },
  {
    key: "2",
    type: "特性立项",
    description: "[开放数据类代码检视覆盖率等数据集和接口] 待立项",
    submitter: "柯圻/IT007563",
    receiveTime: "2025-03-14",
  },
  {
    key: "3",
    type: "特性立项",
    description: "[分行增加看板指标（前置时间、流动效率）] 待立项",
    submitter: "李慧/IT009104",
    receiveTime: "2025-03-25",
  },
];

const columns = [
  {
    title: "类型",
    dataIndex: "type",
    key: "type",
  },
  {
    title: "描述",
    dataIndex: "description",
    key: "description",
  },
  {
    title: "提交人",
    dataIndex: "submitter",
    key: "submitter",
  },
  {
    title: "接收时间",
    dataIndex: "receiveTime",
    key: "receiveTime",
  },
];

const ProcessData: React.FC = () => {
  return (
    <Layout className={styles.container} data-oid="14l7pzo">
      <div className={styles.header} data-oid="pu:75l5">
        <Title level={2} data-oid="05thjgn">
          过程数据室/过程数据二组{" "}
          <Text type="secondary" data-oid="61-sfl2">
            与切换
          </Text>
        </Title>
        <Space data-oid="u-x7dpq">
          <Button data-oid="d7p12n9">每日站会</Button>
          <Button data-oid="qe:iosw">查看项目</Button>
          <Button data-oid="i10:3sz">代码检视</Button>
        </Space>
      </div>

      <Row gutter={[16, 16]} data-oid="kwyge6k">
        <Col span={12} data-oid="_p:myn9">
          <Card className={styles.card} data-oid=".q3gad.">
            <Title level={3} data-oid="5n4x7.c">
              风险及异常
            </Title>
            <List
              dataSource={riskList}
              renderItem={(item) => (
                <List.Item className={styles.riskItem} data-oid="u95:nr8">
                  <Text data-oid="a:kll4e">{item.label}</Text>
                  <Text strong data-oid="l38_9kk">
                    {item.value}
                  </Text>
                </List.Item>
              )}
              data-oid="njf1d3g"
            />
          </Card>
        </Col>

        <Col span={12} data-oid=".v5n0up">
          <Card className={styles.card} data-oid="1gqekvo">
            <Title level={3} data-oid="o.hkctv">
              待办
            </Title>
            <Table
              columns={columns}
              dataSource={todoList}
              pagination={false}
              size="small"
              className={styles.table}
              data-oid="cn33af9"
            />
          </Card>
        </Col>

        <Col span={12} data-oid="vc2yr8_">
          <Card className={styles.card} data-oid="y5r88ao">
            <Title level={3} data-oid=".qean4f">
              最近浏览
            </Title>
            <Text type="secondary" data-oid="xbv2g7m">
              暂无最近浏览的项目/系统
            </Text>
          </Card>
        </Col>
      </Row>

      <div className={styles.footer} data-oid="8-w7k:i">
        <Text data-oid="8lpfhax">责任 主动 稳健 高效 开放 创新</Text>
      </div>
    </Layout>
  );
};

export default ProcessData;
